<script setup>

</script>

<template>
  <div>
    <h1>Home Page</h1>
    // 1. 通过路径的方式跳转
    // (1) this.$router.push('路由路径') [简写]
    // this.$router.push('路由路径?参数名=参数值')
    // this.$router.push('/search')
    // this.$router.push(`/search?key=${this.inpValue}`)
    // this.$router.push(`/search/${this.inpValue}`)

    // (2) this.$router.push({ [完整写法] 更适合传参
    // path: '路由路径'
    // query: {
    // 参数名: 参数值,
    // 参数名: 参数值
    // }
    // })
    // this.$router.push({
    // path: '/search',
    // query: {
    // key: this.inpValue
    // }
    // })
    // this.$router.push({
    // path: `/search/${this.inpValue}` 《=动态路由传参
    // })

    // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
    // this.$router.push({
    // name: '路由名'
    // query: { 参数名: 参数值 },
    // params: { 参数名: 参数值 }
    // })
    this.$router.push({
    name: 'search',
    // query: {
    // key: this.inpValue
    // }
    params: {
    words: this.inpValue
    }
    })
  </div>

  <div>
    <p>path跳转（路径短）：1.query传参 适合多参数 2.动态路由传参params 适合单参数</p>
    <p>name跳转（路径长）：1.query传参 适合多参数 2.动态路由params传参 适合单参数</p>
  </div>
</template>

<style scoped>

</style>